<template>
	<view class="box">
		<view class="top flex">
			<view class="top_one">
				<p>975</p>
				<p>今日步数</p>
			</view>
			<view class="top_two">
				<p>2836</p>
				<p>7日步数</p>
			</view>
			<view class="top_three">
				<p>9332</p>
				<p>31日步数</p>
			</view>
		</view>
		<view class="seven">
			<h2>最近七天步数</h2>
			<image src="../../static/zhex_03.png" mode="" class="img2"></image>
		</view>
		<view class="thirty-one">
			<h2>最近31天的步数</h2>
			<image src="../../static/zhex1_03.png" mode="" class="img2"></image>
		</view>
		
	</view>
</template>

<script>
</script>

<style>
	.flex{display: flex;justify-content: space-between;}
	.top{
		width:90%;margin:1rem auto;
	}
	.top_one{
		width:180rpx;
		height:180rpx;
		border:20rpx #f00 solid;
		border-radius:6rem;
		text-align: center;
		/* margin:0 1rem; */
	}
	.top_one p{line-height:2rem;}
	.top_two{
	width:180rpx;
height:180rpx;
		border:20rpx blue solid;
		border-radius:6rem;
		text-align: center;
			/* margin:0 1rem; */
	}
	.top_two p{line-height:2rem;}
	.top_three{
		width:180rpx;
	height:180rpx;
		border:20rpx #f00 solid;
		border-radius:6rem;
		text-align: center;	
		/* margin:0 1rem; */
	}
	.top_three p{line-height:2rem;}
	.seven{width:90%;margin:0 auto;}
	.seven h2{text-align: center;}
	.thirty-one{width:90%;margin:0 auto;}
	.thirty-one h2{text-align: center;}
</style>